<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="layout/tpl">
<head>
    <meta charset="UTF-8"/>
    <title>权限管理</title>

</head>
<body layout:fragment="content">
<div class="panel-group mb-0" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-info">
        <div class="panel-heading"  role="tab" id="headingOne">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    查询框
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
                <form class="layui-form" action="">
                    <div class="layui-form-item" style="width: 900px; margin: 0 auto;">
                        <div class="layui-inline">
                            <label class="layui-form-label">权限名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="name"  autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">权限URL</label>
                            <div class="layui-input-inline">
                                <input type="text" name="url" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item" style="width: 100px; margin: 0 auto;">
                        <button class="layui-btn" lay-submit lay-filter="query">查询</button>
                    </div>
                </form>
            </div>
        </div>
        <div class="panel-footer panel-info">
            <button id="addPermBtn" class="layui-btn layui-btn-radius layui-btn-warm layui-btn-sm"><i class="layui-icon">&#xe654;</i>添加权限</button>
        </div>
    </div>
</div>
<!-- 数据表格 -->
<table id="datagrid" lay-filter="btns"></table>
<script type="text/html" id="opBar">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</body>
<script type="text/javascript" layout:fragment="myscript">
    $(function () {
        layui.use(['table' , 'layer' , 'form'], function(){
            var table = layui.table;
            var layer = layui.layer;
            var form = layui.form;
            form.on('submit(query)' , function(data){

                permgrid.reload({
                    where:data.field
                    ,page: {
                        curr: 1 //重新从第 1 页开始
                    }
                })
                return false;
            });

            $("#addPermBtn").on('click' , function(e){
                var addIndex = layer.open({
                    type: 2,
                    id:'addPerm',
                    title: '添加权限',
                    fixed: true,
                    scrollbar: true,
                    maxmin: true,
                    area: ['600px', '400px'],
                    content: 'addPermission',
                    btn: ['确认', '取消'],
                    yes: function(index, layero){
                        var fIndex = layer.getFrameIndex("addPerm");
                        var name = layer.getChildFrame("#name" , fIndex).val();
                        var permission = layer.getChildFrame("#permission" , fIndex).val();
                        var url = layer.getChildFrame("#url" , fIndex).val();
                        var mform = layer.getChildFrame("form" , fIndex);
                        var iframeWin = window[layero.find('iframe')[0]['name']];

                        var available = iframeWin.available;
                        var roleinfo = {name : name , url : url , available:available , permission:permission};

                        $.post("add" , roleinfo , function(data){
                            if(data.code == 0) {
                                layer.close(addIndex);
                            }
                            layer.msg(data.msg, {
                                icon: 1,
                            }, function(){
                                permgrid.reload();
                            });
                        } , 'json');

                    }
                });
            });
            table.on('tool(btns)' , function(obj) {
                var data = obj.data;
                var permid = data.id;
                if(obj.event == 'detail') {
                    var index = layer.open({
                        type: 2,
                        title: '查看详情',
                        fixed: true,
                        scrollbar: true,
                        maxmin: true,
                        area: ['600px', '255px'],
                        content: 'detail/'+permid
                    });

                } else if(obj.event == 'edit') {

                    var updateIndex = layer.open({
                        type: 2,
                        id:'updatePerm',
                        title: '修改权限',
                        fixed: true,
                        scrollbar: true,
                        maxmin: true,
                        area: ['600px', '400px'],
                        content: 'updatePerm/'+permid,
                        btn: ['确认', '取消'],
                        yes: function(index, layero){
                            var fIndex = layer.getFrameIndex("updatePerm");

                            var name = layer.getChildFrame("#name" , fIndex).val();
                            var permission = layer.getChildFrame("#permission" , fIndex).val();
                            var url = layer.getChildFrame("#url" , fIndex).val();
                            var mform = layer.getChildFrame("form" , fIndex);
                            var iframeWin = window[layero.find('iframe')[0]['name']];

                            var available = iframeWin.available;
                            var perminfo = {id : permid ,name : name , permission : permission , available:available , url:url};
                            $.post("update" , perminfo , function(data){
                                if(data.code == 0) {
                                    layer.close(updateIndex);
                                }
                                layer.msg(data.msg, {
                                    icon: 1,
                                }, function(){
                                    permgrid.reload();
                                });
                            } , 'json');

                        }
                    });
                } else if(obj.event == 'del') {
                    layer.confirm('确认删除吗?', {icon: 3, title:'提示'}, function(index){
                        $.post("delete" , {permission_id : permid} , function(data){
                            if(data.code == 0) {
                                layer.msg(data.msg);
                                permgrid.reload();
                            }
                        } ,"json");
                        layer.close(index);
                    });
                }
            });
            var permgrid = table.render({
                elem: '#datagrid'
                , url: 'getPerms'
                , cellMinWidth: 80
                , width: '100%'
                , height: 'full-85'
                // , size: 'sm'
                , method: 'post'
                , id: 'usergrid'
                ,cols:[
                    [
                    {field:'name', width:210,  align: 'center' ,title: '权限名',fixed: 'left;'}
                    ,{field:'permission', width:200, align: 'center' ,title: '权限表达式',fixed: 'left;'}
                    ,{field:'url', width:200, align: 'center' ,title: '权限地址',fixed: 'left;'}
                    ,{title:'操作',width:200, align:'center',  align: 'center' ,toolbar: '#opBar',fixed: 'right'}
                ]
                ]
                ,page: true
            });

        });
    });
</script>
</html>